<script setup lang="ts" name="SystemRole">
import { getPageList, deleteById } from '@/api/system/role'
import { Search, Refresh } from "@element-plus/icons-vue"
import type { FormInstance } from 'element-plus'
import { notify } from '@/utils/element'

// 编辑ref
const editRef = ref();

// 定义状态
const state = reactive({
  loading: false,
  page: {
    current: 1, // 当前页码
    size: 10, // 每页显示多少条
    total: 0, // 总记录数
  } as PageType,
  query: {
    name: ''
  } as SysRoleQuery,
  tableList: [] as SysRoleType[],
});

const { loading, page, query, tableList } = { ...toRefs(state) };

onMounted(() => {
  queryData();
});

/**
 * 查询列表数据
 */
async function queryData() {
  try {
    state.loading = true;
    // 调用接口
    // const { current, size } = state.page;
    const { data } = await getPageList(state.query, state.page);
    //console.log('data', data); // {total: xx, records: []}
    state.tableList = []; // 清空
    nextTick(() => {
      // 总记录数
      state.page.total = data.total;
      // 列表数据
      state.tableList = data.records;
    });
  } catch (error) {
  } finally {
    state.loading = false;
  }
}

// 点击查询
function handleQuery() {
  // 将页码设置为第1页
  state.page.current = 1;
  queryData();
}

/** 
 * 重置查询 
 */
const queryFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 点击删除
async function handleDelete(id: string) {
  // console.log('handleDelete', id);
  try {
    state.loading = true;
    await deleteById(id);
    notify('删除成功！', { type: 'success' });
    queryData();
  } catch (error) {
  } finally {
    state.loading = false;
  }
}

// 点击新增
function handleAdd() {
  // console.log('handleAdd');
  editRef.value.open('add', '新增');
}

// 点击修改
function handleEdit(row: SysRoleType) {
  // console.log('handleEdit', row);
  editRef.value.open('edit', '修改', row);
}

// 分配权限
const permissionRef = ref();
function handlePermission(role: SysRoleType) {
  // console.log('handlePermission', role);
  permissionRef.value.open(role);
}
</script>

<template>
  <div class="page-nav">
    <div class="tab-header">
      <div class="tab-header-search">
        <el-form inline :model="query">
          <el-form-item label="角色名称">
            <el-input v-model="query.name" maxlength="30" placeholder="请输入角色名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain :icon="Search" @click="handleQuery()">查询</el-button>
            <el-button type="primary" plain :icon="Refresh" @click="resetForm(queryFormRef)">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tab-header-btn">
        <el-button type="primary" plain @click="handleAdd()" icon="Plus">新增角色</el-button>
      </div>
    </div>
    <div class="tab-page-container">
      <el-table class="table-con" ref="tableListRef" v-loading="loading" :data="tableList" border stripe
        :header-cell-style="{ backgroundColor: '#f7f7f7' }">
        <el-table-column align="center" type="index" label="序号" width="60" />
        <el-table-column align="center" prop="roleName" label="角色名称" />
        <el-table-column align="center" prop="roleCode" label="角色编码" />
        <el-table-column align="center" prop="status" label="角色状态">
          <template #default="{ row }">
            <el-tag :type="row.status ? 'success' : 'warning'">{{ row.status ? '启用' : '停用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="remark" label="备注" />
        <el-table-column fixed="right" align="center" label="操作" width="260">
          <template #default="{ row }">
            <el-button @click.stop="handlePermission(row)" icon="ele-Check" type="primary" link>分配权限</el-button>
            <el-button @click.stop="handleEdit(row)" icon="ele-Edit" type="warning" link>修改</el-button>
            <el-popconfirm @confirm="handleDelete(row.id)" width="auto" :title="`确定永久删除【${row.roleName}】吗？`">
              <template #reference>
                <el-button icon="ele-Delete" type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <Pagination :page="page" @pageChange="queryData"></Pagination>

    <!-- 新增、修改组件 -->
    <RoleEdit ref="editRef" @refresh="queryData" />

    <!-- 分配权限 -->
    <AssignPermission ref="permissionRef"></AssignPermission>
  </div>

</template>

<style scoped land="scss">
.tab-header-search {
  :deep(.el-form-item) {
    margin-bottom: 0px !important;
  }
}
</style>